<template>
  <el-card class="m-20">
    <el-button type="primary" class="el-icon-plus">添加SPU</el-button>
    <el-table
      class="mt-20"
      border
      ref="singleTable"
      :data="spuList"
      highlight-current-row
      style="width: 100%"
    >
      <el-table-column type="index" width="80" label="序号" />
      <el-table-column property="spuName" label="SPU名称" width="400">
      </el-table-column>
      <el-table-column label="SPU描述" property="description" width="400">
      </el-table-column>
      <el-table-column label="操作">
        <template v-slot="{ row }">
          <el-button
            type="primary"
            icon="el-icon-plus"
            size="small"
          ></el-button>
          <el-button
            type="warning"
            icon="el-icon-edit-outline"
            size="small"
          ></el-button>
          <el-button type="info" icon="el-icon-info" size="small"></el-button>
          <el-button
            type="danger"
            icon="el-icon-delete"
            size="small"
          ></el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      class="mt-20"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[4, 8, 12, 16]"
      :page-size="pageSize"
      layout=" prev, pager, next, jumper,->, sizes, total"
      :total="total"
    >
    </el-pagination>
  </el-card>
</template>
<script>
import { mapState } from "vuex";
import { getSpuList } from "@/api/spuList";
export default {
  name: "SpuList",
  data() {
    return {
      currentPage: 1,
      pageSize: 4,
      total: 0,
      spuList: [],
    };
  },
  mounted() {
    this.getSpuLists();
  },
  computed: {
    ...mapState("category", ["category3Id"]),
  },
  methods: {
    async getSpuLists() {
      const res = await getSpuList(
        this.currentPage,
        this.pageSize,
        this.category3Id
      );
      // console.log(res);
      this.spuList = res.data.records;
      this.total = res.data.total;
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.getSpuLists();
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.getSpuLists();
    },
  },
  watch: {
    category3Id: async function (newVal) {
      this.getSpuLists();
    },
  },
};
</script>

<style scoped></style>
